<template>
  <div class="theme-file-icon" :class="iconClass">
    <!-- 文件夹图标 -->
    <template v-if="fileType === 'folder'">
      <FolderOutlined class="folder-icon" />
    </template>
    
    <!-- 图片文件图标 -->
    <template v-else-if="fileType === 'image'">
      <PictureOutlined class="image-icon" />
    </template>
    
    <!-- 视频文件图标 -->
    <template v-else-if="fileType === 'video'">
      <VideoCameraOutlined class="video-icon" />
    </template>
    
    <!-- 音频文件图标 -->
    <template v-else-if="fileType === 'audio'">
      <CustomerServiceOutlined class="audio-icon" />
    </template>
    
    <!-- 文档文件图标 -->
    <template v-else-if="fileType === 'document'">
      <FileTextOutlined class="document-icon" />
    </template>
    
    <!-- PDF文件图标 -->
    <template v-else-if="fileType === 'pdf'">
      <FilePdfOutlined class="pdf-icon" />
    </template>
    
    <!-- 压缩文件图标 -->
    <template v-else-if="fileType === 'archive'">
      <FileZipOutlined class="archive-icon" />
    </template>
    
    <!-- 代码文件图标 -->
    <template v-else-if="fileType === 'code'">
      <CodeOutlined class="code-icon" />
    </template>
    
    <!-- 默认文件图标 -->
    <template v-else>
      <FileOutlined class="default-icon" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  FolderOutlined,
  PictureOutlined,
  VideoCameraOutlined,
  CustomerServiceOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  FileZipOutlined,
  CodeOutlined,
  FileOutlined,
} from '@ant-design/icons-vue'

interface Props {
  fileType: string
  fileName?: string
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium'
})

// 根据文件名和类型确定图标类型
const iconClass = computed(() => {
  const sizeClass = `size-${props.size}`
  const typeClass = `type-${props.fileType}`
  return [sizeClass, typeClass]
})

// 文件类型映射
const getFileType = (fileName: string, type: string) => {
  if (type === 'folder') return 'folder'
  
  const extension = fileName?.toLowerCase().split('.').pop() || ''
  
  // 图片类型
  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(extension)) {
    return 'image'
  }
  
  // 视频类型
  if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
    return 'video'
  }
  
  // 音频类型
  if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma'].includes(extension)) {
    return 'audio'
  }
  
  // 文档类型
  if (['doc', 'docx', 'txt', 'rtf'].includes(extension)) {
    return 'document'
  }
  
  // PDF类型
  if (extension === 'pdf') {
    return 'pdf'
  }
  
  // 压缩文件类型
  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
    return 'archive'
  }
  
  // 代码文件类型
  if (['js', 'ts', 'jsx', 'tsx', 'vue', 'html', 'css', 'scss', 'less', 'py', 'java', 'cpp', 'c', 'php', 'go', 'rs'].includes(extension)) {
    return 'code'
  }
  
  return 'default'
}

const fileType = computed(() => getFileType(props.fileName || '', props.fileType))
</script>

<style scoped>
.theme-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 尺寸样式 */
.size-small {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

.size-medium {
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.size-large {
  width: 48px;
  height: 48px;
  font-size: 28px;
}

/* 文件夹图标 */
.folder-icon {
  color: #faad14;
}

/* 图片图标 */
.image-icon {
  color: #52c41a;
}

/* 视频图标 */
.video-icon {
  color: #1890ff;
}

/* 音频图标 */
.audio-icon {
  color: #722ed1;
}

/* 文档图标 */
.document-icon {
  color: #13c2c2;
}

/* PDF图标 */
.pdf-icon {
  color: #f5222d;
}

/* 压缩文件图标 */
.archive-icon {
  color: #fa8c16;
}

/* 代码文件图标 */
.code-icon {
  color: #eb2f96;
}

/* 默认文件图标 */
.default-icon {
  color: #8c8c8c;
}

/* 深色主题适配 */
[data-theme="dark"] .folder-icon {
  color: #faad14;
}

[data-theme="dark"] .image-icon {
  color: #52c41a;
}

[data-theme="dark"] .video-icon {
  color: #40a9ff;
}

[data-theme="dark"] .audio-icon {
  color: #9254de;
}

[data-theme="dark"] .document-icon {
  color: #36cfc9;
}

[data-theme="dark"] .pdf-icon {
  color: #ff4d4f;
}

[data-theme="dark"] .archive-icon {
  color: #ffa940;
}

[data-theme="dark"] .code-icon {
  color: #f759ab;
}

[data-theme="dark"] .default-icon {
  color: #bfbfbf;
}

/* 悬停效果 */
.theme-file-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}
</style> 